<template>
<div class="home flex-box-div">
    <div class="my-swip">
        <van-swipe class="my-swipe" :autoplay="5000" :duration="1000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in imgList" :key="index">
                <div class="img-box">
                    <img :src="item.img" alt="">
                </div>
            </van-swipe-item>
            
        </van-swipe>
    </div>

    <div class="box">
        
        <div class="header flex-center-space-between mb8">
            <div class="fz-15 blod">推荐品牌</div>
            <!-- <div class="grey">
                more
                <van-icon name="arrow" size="12" color="#999"></van-icon>
            </div> -->
        </div>
        <div class="brand-box">
            <RouterLink :to="`/search?brand=${item.id}`" v-for="(item, index) in goods_brand" :key="index">
                <!-- <img :src="item.img" alt="" > -->
                <van-image
                    class="img"
                    fit="contain"
                    :src="item.img"
                    lazy-load
                />
            </RouterLink>
		   
        </div>

    </div>

    <h3 class="pt10 text-light-gray mb10">商品分类</h3>
    <p class="text-gray fz-10 mb15"><span>--</span> COMMODITY CLASSIFICATION <span>--</span></p>
    <!-- <van-sticky offset-top="1.6rem"> -->
        <van-tabs v-model="active" class="van-hairline--bottom" title-active-color="#ea251c" line-height="2px" @change="tabChange">
            <van-tab :title="item.name" v-for="(item, index) in tabList" :key="index">
                <div class="box">
                    <van-grid :column-num="3">
                        <van-grid-item icon="photo-o" text="文字" v-for="(item1, index1) in item.children" :key="index1">
                            <RouterLink :to="`/search?ct_id=${item1.id}`" class="classify_item">
                                <!-- <div class="img"> -->
                                    <van-image
                                        class="img"
                                        fit="contain"
                                        :src="item1.img"
                                        lazy-load
                                    />
                                <!-- </div> -->
                                <p class="mt10">{{item1.name}}</p>
                                <!-- <span>轴承</span> -->
                            </RouterLink>
                        </van-grid-item>
                    </van-grid>
                </div>
			</van-tab>
        </van-tabs>
    <!-- </van-sticky> -->
    
    <div class="box">
        <div class="header flex-center-space-between mb8 mt12">
            <div class="fz-15 blod">推荐商品</div>
            <div class="grey" @click="$router.push(`/search?is_up=1`)">
                MORE
                <van-icon name="arrow" size="12" color="#999"></van-icon>
            </div>
        </div>
        <div class="goods_big">
            
            <RouterLink class="goods_item fz-12" :to="`/product?id=${item.id}&type=${item.type}`" v-for="(item, index) in goods_up" :key="index">
                <div class="img">
                    <img :src="item.imgurl" alt="" width="160" height="144" style="object-fit: contain">
                </div>
                <p class="mt4 van-ellipsis">{{item.name}}</p>
                <span class="grey van-ellipsis">{{item.level_name}}</span>
            </RouterLink>
        </div>

        <div class="header flex-center-space-between mb8 mt10">
            <div class="fz-15 blod">促销商品</div>
            <div class="grey" @click="$router.push(`/search?is_jx=1`)">
                MORE
                <van-icon name="arrow" size="12" color="#999"></van-icon>
            </div>
        </div>
        <div class="goods_big">
            <RouterLink class="goods_item fz-12 " :to="`/product?id=${item.id}&type=${item.type}`" v-for="(item, index) in goods_jx" :key="index">
                <div class="img">
                    <img :src="item.imgurl" alt="" width="160" height="144" style="object-fit: contain">
                </div>
                <p class="mt4 van-ellipsis">{{item.name}}</p>
                <span class="grey van-ellipsis">{{item.level_name}}</span>
            </RouterLink>
            
        </div>
    </div>

    <div class="pt10 pb30 fz-11 pl10 pr10" style="background-color: #EEEEEE;">
        <van-row>
            <van-col :span="12">
                <div class="flex-center">
                    <img src="@/assets/image/footer1.png" alt="" class="height-36 mr10">
                    <span>品种齐全 一站购物</span>
                </div>
            </van-col>
            <van-col :span="12">
                <div class="flex-center">
                    <img src="@/assets/image/footer2.png" alt="" class="height-36 mr10">
                    <span>品种齐全 一站购物</span>
                </div>
            </van-col>
            <van-col :span="12">
                <div class="flex-center mt10">
                    <img src="@/assets/image/footer3.png" alt="" class="height-36 mr10">
                    <span>品种齐全 一站购物</span>
                </div>
            </van-col>
            <van-col :span="12">
                <div class="flex-center mt10">
                    <img src="@/assets/image/footer4.png" alt="" class="height-36 mr10">
                    <span>品种齐全 一站购物</span>
                </div>
            </van-col>
            <van-col :span="24">
                <p class="pl30 pr30 mt10">
                    浙江神飞传动科技有限公司 © 2020 版权所有  ICP备：浙ICP备2021002588号
                </p>
            </van-col>
        </van-row>
    </div>
</div>
</template>

<script>
import Goods from '@/components/goods'
export default {
    components: { Goods },
    data () {
        return {
            active: 0,
            tabList: [
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
                // {name: '圆柱轴承'},
            ],
			
			imgList:[],
			goods_brand:[],
			goods_up:[],
			goods_jx:[]
        }
    },
	created: function() {
		
		this.getBaseInfo()
		
	},
    methods: {
        tabChange (index) {
            // console.log(index)
        },
		
		getBaseInfo:function(){
			
			const that = this
			this.$home.getHomeData('goods_cate').then(function(res){
				const data = res.data||{}
                const datas = (data.select_list || []).filter(item => item.children.length > 0)
				that.tabList = datas
			})
			
			this.$home.homeCarousel().then(function(res){
				const data = res.data||{}
				that.imgList = data.follow_image||[]
			})
			
			this.$home.getHomeData('goods_up').then(function(res){
				const data = res.data||{}
				that.goods_up = data.up_list||[]
			})
			
			this.$home.getHomeData('goods_jx').then(function(res){
				const data = res.data||{}
				that.goods_jx = data.jx_list||[]
			})
			
			this.$home.getHomeData('goods_brand').then(function(res){
				const data = res.data||{}
				that.goods_brand = data.brand_list||[]
			})

		},
    }
}
</script>

<style lang="less" scoped>
.home.flex-box-div {
    height: auto !important;
}
.my-swipe{
    height: 230px;
    .van-swipe-item {
        height: 100%;
        background-color: #777777;
        .img-box {
            width: 100%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

.box {
    padding: 10px;
    /deep/.van-grid-item__content {
        padding-top: 10px;
        padding-bottom: 6px;
    }
}
.classify_item {
    display: inline-block;
    box-sizing: border-box;
    height: 120px;
    font-size: 12px;
    .img {
        width: 100%;
        height: 78px;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    p {
        margin-top: 15px;
        margin-bottom: 4px;
    }
    span {
        color: #999;
    }
}

.brand-box {
    width: 100%;
    border: 0.5px solid #eaeaea;
    overflow-x: auto;
    display: flex;
    align-items: center;
    height: 50px;
    a {
        border-left: 1px solid #eaeaea;
        height: max-content;
        display: flex;
        align-items: center;
    }
    .img {
        min-width: 80px;
        min-height: 40px;
        max-height: 40px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        /deep/ img {
            max-height: 40px !important;
        }
    }
}

.goods_big {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10px;
    .goods_item {
        width: 160px;
        border: 1px solid #eaeaea;
        margin-bottom: 25px;
        .img {
            height: 144px;
            background-color: #FFFFFF;
        }
        p {
            padding: 0 10px;
        }
        span {
            padding: 0 15px;
        }
    }
}
</style>
